<template>
  <div class="b2cSort">
    <div class="common-loading" v-show="loadings.form">
      <van-loading type="spinner" color="#ed6d00" />
    </div>
    <van-nav-bar title="B2C分货" left-text="返回" @click-left="goBack"></van-nav-bar>
    <van-form class="common-form">
      <van-field
        ref="pickCartonId"
        id="pickCartonId"
        v-model="form.pickCartonId"
        label="拣货箱号"
        placeholder="请扫描拣货箱号"
        @keydown.enter.native="!pdaScanData.data ? getSortDetailWithPda() : ''"
        @focus="disableKeyboard('pickCartonId')"
        @click="disableKeyboard('pickCartonId')"
        :readonly="readOnlys.pickCartonId"
      />
      <van-field
        ref="scanValue"
        id="scanValue"
        v-model="form.scanValue"
        :label="form.scanType === 'qr_code' ? '商品唯一码' : '商品条码'"
        :placeholder="form.scanType === 'qr_code' ? '请扫描商品唯一码' : '请扫描商品条码'"
        @keydown.enter.native="!pdaScanData.data ? getCarLineNoWithPda() : ''"
        @focus="disableKeyboard('scanValue')"
        @click="disableKeyboard('scanValue')"
        :readonly="readOnlys.scanValue"
      />
      <!-- <van-field
        ref="carlineCode"
        id="carlineCode"
        v-model="form.carlineCode"
        label="格子条码"
        placeholder="请扫描格子条码"
        @keydown.enter.native="!pdaScanData.data ? saveSortCartonCodePda() : ''"
        @focus="disableKeyboard('carlineCode')"
        @click="disableKeyboard('carlineCode')"
        :readonly="readOnlys.carlineCode"
      /> -->
    </van-form>
    <div style="text-align: center;margin:20px 16px;" v-if="form.carlineNo">
      <div
        style="width: 100%;height: 120px;text-align: center;vertical-align: center; font-size: 100px;line-height:100px; color: #fff;"
        :style="{background: randomColorvalue === '#ffffff' ? 'red' : randomColorvalue}"
      >
        {{ form.carlineNo }}
      </div>
    </div>
    <van-tabbar inactive-color="#ed6d00">
      <van-tabbar-item @click="getDetail('ALL')">查看全部</van-tabbar-item>
      <van-tabbar-item @click="getDetail('DIFF')">查看差异</van-tabbar-item>
    </van-tabbar>
    <van-dialog v-model="showCheckResult" show-cancel-button class="common-dialog" :showConfirmButton="false" cancelButtonText="知道了">
      <div slot="title">
        <div class="b2cSort-info">
          <span>{{ (checkResult.length > 0 && checkResult[0].skuDesc) || "" }}</span>
          <span>{{ (checkResult.length > 0 && checkResult[0].barCode) || "" }}</span>
        </div>
        <div class="red">{{ checkMsg }}</div>
      </div>
      <div class="b2cSort-table-wrap">
        <van-row type="flex" class="common-list">
          <van-col span="12">
            格子号
          </van-col>
          <van-col span="12" align="right">
            已扫件数
          </van-col>
        </van-row>
        <van-row type="flex" class="common-list" justify="center" align="center" v-for="(item, index) in checkResult" :key="index">
          <van-col span="12">
            {{ item.carLineNo }}
          </van-col>
          <van-col span="12" align="right">
            {{ item.sortQty }}
          </van-col>
        </van-row>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {getSortDetailWithPda, getCarLineNoWithPda, saveSortCartonCodePda} from "@/api/sortScan/sortScan";
export default {
  name: "sortIndex",
  data() {
    return {
      randomColorvalue: "",
      form: {
        pickCartonId: "",
        scanValue: "",
        carlineNo: "",
        sortHeaderId: "",
        pickedQty: 0,
        sortQty: 0,
        scanType: "",
        carlineCode: ""
      },
      readOnlys: {
        pickCartonId: false,
        scanValue: false,
        carlineCode: false
      },
      checkResult: [],
      checkMsg: "",
      showCheckResult: false,
      loadings: {
        form: false
      }
    };
  },
  watch: {
    pdaScanData: {
      handler(data) {
        let input = document.activeElement.id;
        if (input == "pickCartonId") {
          this.form.pickCartonId = data.data;
          this.getSortDetailWithPda();
        } else if (input == "scanValue") {
          this.form.scanValue = data.data;
          this.getCarLineNoWithPda();
        }
        // else if (input == "carlineCode") {
        //   this.form.carlineCode = data.data;
        //   this.saveSortCartonCodePda();
        // }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters("scanner", ["pdaScanData"]),
    ...mapGetters("user", ["userData"]),
    storerId() {
      return this.$root.storerWarehouseBrand.storerId;
    },
    warehouseId() {
      return this.$root.storerWarehouseBrand.warehouseId;
    },
    brandId() {
      return this.$root.storerWarehouseBrand.brandId;
    },
    isValueEmpty() {
      let arry = ["pickCartonId", "scanValue", "carlineCode"];
      let flag = true;
      for (let i = 0; i < arry.length; i++) {
        if (!this.form[arry[i]]) {
          flag = false;
          break;
        }
      }
      return flag;
    }
  },
  mounted() {
    if (this.$route.params.pickCartonId) {
      this.form.pickCartonId = this.$route.params.pickCartonId;
      this.getSortDetailWithPda();
    }
    if (this.$route.params.carlineNo) {
      this.form.carlineNo = this.$route.params.carlineNo;
      this.randomColorvalue = this.randomColor();
    }
    this.check();
  },
  methods: {
    randomColor() {
      return "#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6);
    },
    check() {
      let arry = ["pickCartonId", "scanValue", "carlineCode"];
      let flag = true;
      arry.forEach(item => {
        if (flag && !this.form[item]) {
          this.$nextTick(() => {
            this.$refs[item] && this.$refs[item].focus();
          });
          flag = false;
        }
      });
    },
    // 禁用键盘
    disableKeyboard(name) {
      this.readOnlys[name] = true;
      setTimeout(() => {
        this.readOnlys[name] = false;
      }, 200);
    },
    // 拣货箱号
    getSortDetailWithPda() {
      if (!this.form.pickCartonId) {
        return;
      }
      let params = {
        storerId: this.storerId, // "货主ID",
        warehouseId: this.warehouseId, // "仓库ID",
        brandId: this.brandId, // "品牌ID",
        pickCartonNo: this.form.pickCartonId,
        userName: this.userData.sysUserLoginName, // "操作人名称"
        queryType: "1"
      };
      this.loadings.form = true;
      getSortDetailWithPda(params)
        .then(response => {
          this.loadings.form = false;
          if (response.data.status) {
            // 成功操作
            let res = response.data.data;
            this.form.scanType = res.scanType;
            this.form.sortHeaderId = res.sortHeaderId;
            this.form.pickedQty = res.pickedQty;
            this.form.sortQty = res.sortQty;
          } else {
            this.$toast.fail(response.data.message);
            this.form.pickCartonId = "";
          }
          this.check();
        })
        .catch(() => {
          this.loadings.form = false;
          this.$toast.fail("请求出错！");
          this.form.pickCartonId = "";
        });
    },
    getCarLineNoWithPda() {
      if (!this.form.pickCartonId) {
        this.$refs.pickCartonId.focus();
        this.form.scanValue = "";
        return;
      } else if (!this.form.scanValue) {
        return;
      }
      let params = {
        storerId: this.storerId, // "货主ID",
        warehouseId: this.warehouseId, // "仓库ID",
        brandId: this.brandId, // "品牌ID",
        sortHeaderId: this.form.sortHeaderId,
        pickTaskCode: this.form.pickCartonId,
        scanType: this.form.scanType,
        scanValue: this.form.scanValue
      };
      this.loadings.form = true;
      getCarLineNoWithPda(params)
        .then(response => {
          this.loadings.form = false;
          if (response.data.status && !!response.data.data) {
            let res = response.data.data;
            let sortResult = res.sortResult;
            this.form.carlineNo = sortResult.carLineNo;
            this.randomColorvalue = this.randomColor();
            this.form.sortDetailId = sortResult.id;
            this.form.carlineCode = sortResult.carLineNo;
            this.saveSortCartonCodePda();
          }
          // 分货失败，可能商品已分货完成
          else if (!response.data.status && !!response.data.data) {
            // 成功操作
            let res = response.data.data;
            this.form.carlineNo = "";
            this.form.sortDetailId = "";
            this.form.scanValue = "";
            this.checkResult = res.checkResult;
            this.checkMsg = response.data.message;
            this.showCheckResult = true;
          } else {
            this.$toast.fail(response.data.message);
            this.form.scanValue = "";
          }
          this.check();
        })
        .catch(() => {
          this.loadings.form = false;
          this.$toast.fail("请求出错！");
          this.form.scanValue = "";
        });
    },
    saveSortCartonCodePda() {
      if (!this.isValueEmpty) {
        this.form.carlineCode = "";
        return;
      }
      let params = {
        storerId: this.storerId, // "货主ID",
        warehouseId: this.warehouseId, // "仓库ID",
        brandId: this.brandId, // "品牌ID",
        pickTaskCode: this.form.pickCartonId,
        sortHeaderId: this.form.sortHeaderId,
        scanType: this.form.scanType,
        scanValue: this.form.scanValue,
        userName: this.userData.sysUserLoginName,
        sortDetailId: this.form.sortDetailId,
        carlineNo: this.form.carlineNo,
        carlineCode: this.form.carlineCode
      };
      this.loadings.form = true;
      saveSortCartonCodePda(params)
        .then(response => {
          this.loadings.form = false;
          if (response.data.status) {
            // this.form.carlineNo = "";
            this.form.sortDetailId = "";
            this.form.scanValue = "";
            this.check();
            this.$toast.success(response.data.message);
          } else {
            this.$toast.fail(response.data.message);
          }
          this.form.carlineCode = "";
        })
        .catch(() => {
          this.loadings.form = false;
          this.form.carlineCode = "";
          this.$toast.fail("请求出错！");
        });
    },
    getDetail(type) {
      if (this.form.sortHeaderId == "") {
        this.$toast.fail("拣货箱号不能为空");
      } else {
        this.$router.push({
          name: "lookAll",
          query: {
            sortHeaderId: this.form.sortHeaderId,
            type: type,
            pickCartonId: this.form.pickCartonId,
            carlineNo: this.form.carlineNo
          }
        });
      }
    },
    goBack() {
      this.$router.push({
        name: "outBoundIndex"
      });
    }
  }
};
</script>
